<template>
  <div>
    <el-form>
      <div class="search-panel">
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="项目名称" label-width="80px">
                <el-select
                  v-model="ProjectName"
                  size="mini"
                  placeholder="请选择"
                  @change="ProChange"
                >
                  <el-option-group
                    v-for="group in optionProJect"
                    :key="group.lable"
                    :label="group.lable"
                  >
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.lable"
                      :value="item.value"
                    />
                  </el-option-group>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="当前月份">
                <el-date-picker
                  v-model="Month"
                  type="month"
                  size="mini"
                  value-format="yyyy-MM"
                  format="yyyy-MM"
                  style="width: 140px"
                  :clearable="false"
                  placeholder="选择月"
                  @change="ChangeMonth"
                />
              </el-form-item></div
          ></el-col>
          <el-col :span="12" style="text-align: right">
            <el-button
              size="mini"
              @click="SubmitMonth"
              v-if="DeptName == '项目部'"
              ><img
                src="../../assets/image/审批通过.png"
                style="width: 9px; margin-right: 5px"
              />提交本月填报</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <div>
          <el-table
            :data="Datalist"
            style="width: 100%; margin-bottom: 20px"
            row-key="objectID"
            border
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            v-loading="loading"
            default-expand-all
          >
            <el-table-column
              prop="任务编码"
              fixed
              label="任务编码"
              width="200"
            />
            <el-table-column
              label="作业名称"
              show-overflow-tooltip
              fixed
              width="210"
            >
              <template scope="scope">
                <span
                  style="
                    width: 160px;
                    height: 17px;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  >{{ scope.row.任务名称 }}</span
                ><img
                  v-show="
                    scope.row.是否关键节点 == 1 &&
                    scope.row.children.length == 0
                  "
                  style="
                    width: 10px;
                    float: right;
                    margin-right: 10px;
                    margin-top: 6px;
                  "
                  src="../../assets/image/关键路径_ed.png" /></template
            ></el-table-column>
            <el-table-column prop="设计量" label="设计量" width="80" />
            <el-table-column label="进度" width="200">
              <template scope="scope">
                <el-progress
                  :percentage="scope.row.jind"
                  :color="customColorMethod"
                />
              </template>
            </el-table-column>
            <el-table-column label="状态" width="140">
              <template scope="scope">
                <div v-if="scope.row.zhuangt == 1" style="text-align: center">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      '任务“' +
                      scope.row.任务名称 +
                      '”计划于' +
                      scope.row.完成时间 +
                      '完成,此为关键路径任务，予以重视'
                    "
                    placement="top-start"
                  >
                    <img
                      style="cursor: pointer; margin: 0px 15px -6px 0px"
                      src="../../assets/image/预警.png"
                    />
                  </el-tooltip>
                  <el-tag>正常</el-tag>
                </div>
                <div v-else style="text-align: center">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      '任务“' +
                      scope.row.任务名称 +
                      '”计划于' +
                      scope.row.完成时间 +
                      '完成,现已超期，予以重视'
                    "
                    placement="top-start"
                  >
                    <img
                      style="cursor: pointer; margin: 0px 15px -6px 0px"
                      src="../../assets/image/预期.png"
                    />
                  </el-tooltip>
                  <el-tag type="danger">滞后</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="开始时间" label="计划开始时间" width="140" />
            <el-table-column prop="完成时间" label="计划完成时间" width="140" />
            <el-table-column
              prop="累计完成总量"
              label="累计完成总量"
              width="100"
            />
            <el-table-column prop="年度完成量" label="年度完成量" width="100" />
            <el-table-column prop="月度完成量" label="月度完成量" width="100" />
            <el-table-column fixed="right" label="操作" width="200">
              <template scope="scope">
                <el-button
                  v-if="!isShowaddBtn && DeptName == '项目部'"
                  type="text"
                  style="color: gray"
                  size="small"
                  @click="add(scope)"
                  ><img
                    src="../../assets/image/填报工程量.png"
                    style="width: 10px"
                  />填报工程量</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"
          ><img
            src="../../assets/image/关键路径.png"
            style="width: 10px; margin-right: 3px"
          />关键路径</span
        >
        <div>
          <el-table
            :data="Datalist"
            style="width: 100%; margin-bottom: 20px"
            row-key="objectID"
            border
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            v-loading="loading"
            default-expand-all
          >
            <el-table-column
              prop="任务编码"
              fixed
              label="任务编码"
              width="200"
            />
            <el-table-column
              label="作业名称"
              show-overflow-tooltip
              fixed
              width="210"
            >
              <template scope="scope">
                <span
                  style="
                    width: 160px;
                    height: 17px;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  >{{ scope.row.任务名称 }}</span
                ><img
                  v-show="
                    scope.row.是否关键节点 == 1 &&
                    scope.row.children.length == 0
                  "
                  style="
                    width: 10px;
                    float: right;
                    margin-right: 10px;
                    margin-top: 6px;
                  "
                  src="../../assets/image/关键路径_ed.png" /></template
            ></el-table-column>
            <el-table-column prop="设计量" label="设计量" width="80" />
            <el-table-column label="进度" width="200">
              <template scope="scope">
                <el-progress
                  :percentage="scope.row.jind"
                  :color="customColorMethod"
                />
              </template>
            </el-table-column>
            <el-table-column label="状态" width="140">
              <template scope="scope">
                <div v-if="scope.row.zhuangt == 1" style="text-align: center">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      '任务“' +
                      scope.row.任务名称 +
                      '”计划于' +
                      scope.row.完成时间 +
                      '完成,此为关键路径任务，予以重视'
                    "
                    placement="top-start"
                  >
                    <img
                      style="cursor: pointer; margin: 0px 15px -6px 0px"
                      src="../../assets/image/预警.png"
                    />
                  </el-tooltip>
                  <el-tag>正常</el-tag>
                </div>
                <div v-else style="text-align: center">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      '任务“' +
                      scope.row.任务名称 +
                      '”计划于' +
                      scope.row.完成时间 +
                      '完成,现已超期，予以重视'
                    "
                    placement="top-start"
                  >
                    <img
                      style="cursor: pointer; margin: 0px 15px -6px 0px"
                      src="../../assets/image/预期.png"
                    />
                  </el-tooltip>
                  <el-tag type="danger">滞后</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="开始时间" label="计划开始时间" width="140" />
            <el-table-column prop="完成时间" label="计划完成时间" width="140" />
            <el-table-column
              prop="累计完成总量"
              label="累计完成总量"
              width="100"
            />
            <el-table-column prop="年度完成量" label="年度完成量" width="100" />
            <el-table-column prop="月度完成量" label="月度完成量" width="100" />
            <el-table-column fixed="right" label="操作" width="200">
              <template scope="scope">
                <el-button
                  v-show="!isShowaddBtn && DeptName == '项目部'"
                  type="text"
                  style="color: gray"
                  size="small"
                  @click="add(scope)"
                  ><img
                    src="../../assets/image/填报工程量.png"
                    style="width: 10px"
                  />填报工程量</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="填报工程量"
      :visible.sync="dialogVisibleadd"
      :close-on-click-modal="false"
      width="400px"
    >
      <div class="addForm">
        <el-form ref="addForm" :model="addForm" :rules="rules">
          <el-row>
            <el-col :span="24"
              ><el-form-item label="完成量" prop="finish">
                <el-input
                  v-model="addForm.finish"
                  placeholder="请输入完成量"
                  size="mini"
                  style="width: 355px"
                /> </el-form-item
            ></el-col>
            <el-col :span="24"
              ><el-form-item label="实际开始时间" prop="starttime">
                <el-date-picker
                  v-model="addForm.starttime"
                  size="mini"
                  type="date"
                  placeholder="选择日期"
                  style="width: 355px"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                /> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Global from "@/utils/Global";
import { getApi } from "@/utils/utils.js";
export default {
  data() {
    return {
      apiUrl:'',
      UserID: this.$getUserInfo().ObjectID,
      //UserID: "18f923a7-5a5e-426d-94ae-a55ad1a4b239",
      DeptName: "",
      apiurl: "",
      // 表数据
      Datalist: [],
      ProjectName: "",
      Month: "",
      optionProJect: [],

      dialogVisibleadd: false,
      addForm: {
        finish: "",
        starttime: "",
      },
      rules: {
        finish: [{ required: true, message: "请输入完成量", trigger: "blur" }],
        starttime: [
          { required: true, message: "请输入开始时间", trigger: "change" },
        ],
      },
      loading: false,
      activeName: "first",
      tabType: "first",
      parentNodeCode: "",
      rowData: Object,
      isShowaddBtn: false,
    };
  },
  computed: {},
  created() {
    let yy = new Date().getFullYear();
    let mm =
      new Date().getMonth() + 1 < 10
        ? "0" + (new Date().getMonth() + 1)
        : new Date().getMonth() + 1;
    this.Month = yy + "-" + mm + "-01";
    getApi(this).then((res) => {
      this.apiUrl = res.ApiUrl;
      this.GetProName();
      this.getUserRoot();
    });
  },
  mounted() {},
  methods: {
    customColorMethod(percentage) {
      if (percentage < 50) {
        return "#409eff";
      } else {
        return "#67c23a";
      }
    },
    //角色按钮权限
    getUserRoot() {
      const _that = this;
      axios({
        method: "get",
        url: `${this.apiUrl}/Pmsapi/PlanManagement/GetRoleByLoginUserId?loginUserId=${_that.UserID}`,
      }).then((res) => {
        console.log(res.data.data.role);
        if (res.data.data.role == 1) {
          _that.DeptName = "生产管理部";
        } else if (res.data.data.role == 2) {
          _that.DeptName = "项目部";
        }
      });
    },
    // 绑定项目名称下拉框
    GetProName() {
      const _that = this;
      axios({
        method: "get",
        url: `${this.apiUrl}/Pmsapi/PlanManagement/GetProjectInfoByLoginUserId?loginUserId=${_that.UserID}`,
      }).then((res) => {
        _that.optionProJect.push({
          options: [{ value: "0", lable: "请选择" }],
        });
        if (res.data.data.errMsg == "") {
          res.data.data.data.forEach((element) => {
            _that.optionProJect.push(element);
          });
        }
        this.ProjectName = "0";
      });
    },
    ProChange(val) {
      this.GetList();
    },
    ChangeMonth(val) {
      this.Month = val + "-01";
      this.GetList();
    },
    // 选项卡切换事件
    handleClick(tab) {
      if (
        this.ProjectName == "" ||
        this.ProjectName == undefined ||
        this.ProjectName == "0" ||
        this.ProjectName == "请选择"
      ) {
        return;
      }
      this.tabType = tab.name;
      this.$nextTick(() => this.GetList());
    },
    //获取列表数据
    // 获取项目
    GetList() {
      const _that = this;
      _that.loading = true;
      _that.Datalist = [];
      if (_that.tabType == "first") {
        axios({
          method: "get",
          url: `${this.apiUrl}/Pmsapi/PlanManagement/GetProjectPlanByMonth?projectId=${_that.ProjectName}&monthDate=${_that.Month}`,
        }).then((res) => {
          if (res.data.data.errMsg == "") {
            axios({
              method: "get",
              url: `${this.apiUrl}/Pmsapi/PlanManagement/isSubmitedByMonth?projectId=${_that.ProjectName}&monthDate=${_that.Month}`,
            }).then((r) => {
              _that.isShowaddBtn = r.data.data.isSubmited;
              _that.Datalist = res.data.data.data;
            });
          }
          _that.loading = false;
        });
      } else {
        axios({
          method: "get",
          url: `${this.apiUrl}/Pmsapi/PlanManagement/GetKeyNodesOfProjectByProjectId?projectId=${_that.ProjectName}&monthDate=${_that.Month}`,
        }).then((res) => {
          if (res.data.data.errMsg == "") {
            _that.Datalist = res.data.data.data;
          }
          this.loading = false;
        });
      }
    },
    //提交本月填报
    SubmitMonth() {
      const _that = this;
      if (
        _that.ProjectName == "" ||
        _that.ProjectName == undefined ||
        _that.ProjectName == "请选择" ||
        _that.ProjectName == "0"
      ) {
        _that.$message.error("请选择项目名称");
        return;
      }
      _that
        .$confirm("是否提交本月填报?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
        .then(() => {
          axios({
            method: "get",
            url: `${this.apiUrl}/Pmsapi/PlanManagement/SubmitWordloadGroupByMonths?projectId=${_that.ProjectName}&projectEditionCode=${_that.ProVersion}&monthDate=${_that.Month}`,
          }).then((res) => {
            if (res.data.data.errMsg === "") {
              _that.$message.success("提交成功");
              _that.isShowaddBtn = true;
              // 后面考虑刷新
            } else {
              _that.$message.error("提交失败");
            }
          });
        })
        .catch(() => {
          _that.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    add(item) {
      this.rowData = item;
      this.dialogVisibleadd = true;
      this.parentNodeCode = item.row.任务编码;
      if (this.$refs["addForm"] != undefined)
        this.$refs["addForm"].resetFields();
    },
    //新增工作量
    Save() {
      const _that = this;
      _that.$refs["addForm"].validate((valid) => {
        if (valid) {
          axios({
            method: "get",
            url: `${this.apiUrl}/Pmsapi/PlanManagement/AddNewWorkOfProjectPlan?projectId=${_that.ProjectName}&nodeCode=${_that.parentNodeCode}&finishedWordload=${_that.addForm.finish}&finishedDate=${_that.addForm.starttime}&createUserId=${_that.UserID}&reportedMonthDate=${_that.Month}`,
          }).then((res) => {
            if (res.data.data.errMsg === "") {
              _that.$message.success("新增成功");
              _that.dialogVisibleadd = false;
              this.rowData.row.累计完成总量 =
                parseInt(this.rowData.row.累计完成总量) +
                parseInt(_that.addForm.finish);

              // 后面考虑刷新
            } else {
              _that.$message.error(res.data.data.errMsg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
/deep/ * {
  font-size: 12px;
}
.search-panel {
  padding: 20px 5px 0px 0px;
  box-sizing: border-box;
}
.manage-panel {
  box-sizing: border-box;
  padding: 4px 10px 0px;
  border-top: solid 1px #e8eaef;
}
.data-panel {
  box-sizing: border-box;
  padding: 5px;
}

/deep/.el-collapse-item__header {
  background-color: #f4f6f9;
  height: 28px;
  color: #000000;
  font-weight: bold;
}
.pagination-panel {
  text-align: right;
  padding: 5px;
  box-sizing: border-box;
}

/deep/ .el-dialog__title {
  font-size: 16px;
}

/deep/ .el-dialog__footer {
  padding-top: 20px;
}
/* .luj_icon{
  background: url('../../assets/image/关键路径.png');
} */
</style>
<style>
.addForm .el-form-item__content {
  margin-left: 0px !important;
}
</style>

